<template>
    <div>
<!-- 处理文章-->
        <my-phote></my-phote>
        <div style="display: flex;">
            <div style="flex: 1%;"></div>
            <!--                中央布局内-->
            <div style="background-color: white;width: 1730px; margin-top:90px;margin-right:170px;flex:12;border-radius: 4px;display: flex;margin-bottom: 150px;">

                <div  style="margin-left: 150px;margin-top: 50px;margin-right: 100px;">  <el-image style="width: 1200px;height: 500px;margin-left: 150px;" src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=2032831398,3895324758&fm=26&gp=0.jpg" ></el-image>


                    <div style="margin-top: 100px;margin-left: 200px;margin-right: 180px;">
                        <el-image style="width: 200px;height: 200px;position:absolute;top: 550px;" src="https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1483802554,2802139947&fm=11&gp=0.jpg"></el-image>
                        <h2>昵称：{{username}}</h2>
                        <el-container style="margin-bottom: 60px;width: 1100px;">
                            <el-header>
                                <el-button style="float: right"  @click="$router.push('/creaArticle')">书写文章</el-button>

                            </el-header>
                            <el-container>
                                <el-aside width="200px">    <!--  左边导航栏组件-->
                                    <div class="sidebar">
                                        <el-menu
                                                class="sidebar-el-menu"
                                                :default-active="onRoutes"
                                                :collapse="collapse"
                                                background-color="#334256"
                                                text-color="#ffffff"
                                                active-text-color="#20a0ff"
                                                router
                                        >
                                            <template v-for="item in items">
                                                <template>
                                                    <el-menu-item :index="item.index" :key="item.index">
                                                        <i :class="item.icon"></i>
                                                        {{item.title}}
                                                    </el-menu-item>
                                                </template>
                                            </template>

                                        </el-menu>
                                    </div>
                                </el-aside>
                                <el-main style="padding: 0px;margin-left: 30px;">
                                    <router-view></router-view>
                                </el-main>
                            </el-container>
                        </el-container>
                    </div>
                    <div>

                    </div>
                </div>



            </div>

        <div style="flex: 1;"></div>
        </div>
    </div>
</template>

<script>

    import MyPhote from "@/daoHangL/myPhote";

    export default {
        name: "article",
        components: {MyPhote},
        data(){
            return({
                collapse: false,
                username: localStorage.getItem('NAME'),
                tabPosition: 'left',
                items: [
                    {

                        icon: 'el-icon-tickets',
                        index: 'articleled',
                        title: '文章表格',
                    },
                    {

                        icon: 'el-icon-notebook-2',
                        index: 'classify',
                        title: '文章分类',
                    },
                    {

                        icon:'el-icon-open',
                        index: 'label',
                        title: '文章标签',
                    },
                    {

                        icon: 'el-icon-picture-outline',
                        index: 'photo',
                        title: '文章相册',
                    },
                    {

                        icon: 'el-icon-camera',
                        index: 'photograph',
                        title: '文章照片',
                    },

                ],
                info: [
                    {
                        ima: ''
                    }
                ]

                ,
                computed: {
                    onRoutes() {
                        return this.$route.path.replace('/', '')
                    }
                },
                created() {

                }
            })
        }
    }
</script>

<style scoped>

</style>